<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body ng-app="MyApp">

<div ng-controller="MyController1">
  <input type="text" ng-model="username">
  <span>{{username}}</span>
</div >

<div ng-controller="MyController2">
  <input type="text" ng-model="username">
  <span>{{username}}</span>
</div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
    // console.log(angular);
    //隐式声明依赖注入
    // angular.module('MyApp',[])
    //   .controller('MyController1',function ($scope) {
    //     $scope.username = 'zzl1'
    //   })
    // .controller('MyController2',function ($scope) {
    //   $scope.username = 'zzl2'
    // })

    // 上述书写方式称为隐式声明，本质上没有什么问题，但是代码压缩的时候会出问题
    // 为了代码混淆，所有的形参都会变成abcd这种毫无意义的字母，那么形参不是$scope就会出现问题
    // 解决方案就是显式依赖注入，将传入的形参名称变成一个字符串，作为数据存储起来
    angular.module('MyApp',[])
      .controller('MyController1',['$scope',function ($scope) {
        $scope.username = 'zzl1'
      }])
      .controller('MyController2',['$scope',function ($scope) {
        $scope.username = 'zl2'
      }])
</script>
</body>
</html>